<script setup lang="ts"></script>

<template>
    <div class="home">
        <div class="logo-box"></div>
        <div class="search-box">
            <input type="text">
            <button>搜索一下</button>
        </div>
        <div class="hot-link">
            热门搜索：
            <!-- <router-link to="/detail?key=黑马程序员&index=0">黑马程序员</router-link>
            <router-link to="/detail?key=前端培训&index=1">前端培训</router-link>
            <router-link to="/detail?key=如何成为前端大牛&index=2">如何成为前端大牛</router-link> -->
            <div>
                <router-link to="/detail/黑马程序员/0">黑马程序员-动态路由</router-link>
                <router-link to="/detail/前端培训/1">前端培训-动态路由</router-link>
                <router-link to="/detail/如何成为前端大牛/2">如何成为前端大牛-动态路由</router-link>
            </div>

        </div>
    </div>
</template>

<style scoped>
.logo-box {
    height: 150px;
    /* background: url('@/assets/logo.jpeg') no-repeat center; */
}

.search-box {
    display: flex;
    justify-content: center;
}

.search-box input {
    width: 400px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #c4c7ce;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-box input:focus {
    border: 2px solid #ad2a26;
}

.search-box button {
    width: 100px;
    height: 36px;
    border: none;
    background-color: #ad2a26;
    color: #fff;
    position: relative;
    left: -2px;
    border-radius: 0 4px 4px 0;
}

.hot-link {
    width: 508px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}

.hot-link a {
    margin: 0 5px;
}
</style>